<script lang="ts">
    import * as Form from "$lib/components/ui/form";
    import { Input } from "$lib/components/ui/input";
    import { Switch } from "$lib/components/ui/switch";
    import { formSchema, type AddSpace } from "./schema";
    import { superForm, defaults } from "sveltekit-superforms";
    import { zod, zodClient } from "sveltekit-superforms/adapters";

    const { onSummit }: { onSummit: (data: AddSpace) => void } = $props();
    const initialData: AddSpace = { name: "", desp: "", booking: false };
    const form = superForm(defaults(initialData, zod(formSchema)), {
        SPA: true,
        validators: zodClient(formSchema),
        onUpdate({ form }) {
            if (form.valid) {
                onSummit(form.data);
            }
        },
    });
    const { form: formData, enhance, constraints } = form;
</script>

<form method="POST" use:enhance>
    <Form.Field {form} name="name">
        <Form.Control>
            {#snippet children({ props }: { props: any })}
                <Form.Label>课程名称</Form.Label>
                <Input {...props} bind:value={$formData.name} />
            {/snippet}
        </Form.Control>
        <Form.Description>请填写课程名称.</Form.Description>
        <Form.FieldErrors />
    </Form.Field>
    <Form.Field {form} name="desp">
        <Form.Control>
            {#snippet children({ props }: { props: any })}
                <Form.Label {...props}>课程内容</Form.Label>
                <Input {...props} bind:value={$formData.desp} />
            {/snippet}
        </Form.Control>
        <Form.Description>请简单描述课程内容.</Form.Description>
        <Form.FieldErrors />
    </Form.Field>
    <Form.Field {form} name="booking">
        <Form.Control>
            {#snippet children({ props }: { props: any })}
                <Form.Label {...props}>需要预约</Form.Label>
                <Switch {...props} bind:checked={$formData.booking} />
            {/snippet}
        </Form.Control>
        <Form.Description>课程是否需要预约.</Form.Description>
        <Form.FieldErrors />
    </Form.Field>
    <Form.Button class="w-full">提交</Form.Button>
</form>
